I am trying to authorize the site through Firebase, everything works as it should, the data is sent to the Firebase server. But further, in the signIn function, I try to create a h2-element and put the mail data into it, which the user entered and clicked on the Login button (I want the mail to be displayed on the site instead of the name), then an error appears on the line where I highlighted with a red arrow: "autorizationName is null, undefined ", no data is sent to html. I can’t understand why, so help, please, I’m recently studying JS to figure it out.
This can happen if I added one JS script to two HTML pages? That is, index.html and autorization.html to the two I added autorization.js I wanted it to be redirected to the main page when authorizing from one page.
const login = document.querySelector(".form-login")
login.addEventListener('click', signIn)
function signIn() {
const email = document.querySelector(".email").value
const password = document.querySelector(".password").value
// e.preventDefault()
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log("Email firebase: ", user.email);
const user2 = JSON.parse(JSON.stringify(user.email))
const autorizationName = document.querySelector(".autorization-name__container");
const autorizationNameTitle = document.createElement("h2");
autorizationNameTitle.textContent = user2;
autorizationNameTitle.classList.add("autorization-name__title");
autorizationName.appendChild(autorizationNameTitle); // Error: autorizationName is null, undefined
window.location.replace("http://192.168.1.65:5500/")
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert(errorMessage + ", " + errorCode);
});
}
Here are screenshots:
At the line of
autorizationName.appendChild(autorizationNameTitle);
you are getting an error which says that authorizationName is null, undefined. So, logically, we need to take a look at the place where its value was modified the last time (in this case, it is its initialization):
const autorizationName = document.querySelector(".autorization-name__container");
And it is a known fact that if your call to document.querySelector yields undefined, then the selector did not match any elements. So, the reason for the error is that there is no element in your page with the class of authorization-name__container at the time you try to find it. So, you will need to fix the selector or find out when the given element is created.
It is 100% an error with the string '.authorization-name__container', try to copy paste this class from where you have it in your code and double check for mispelled words. Then if that doesn't work try to use an id instead of a class